
<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title>polymer-ui-toolbar</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- load toolkit -->
    <script src="../../polymer/polymer.js"></script>
    <!-- import elements-->
    <link rel="import" href="polymer-ui-toolbar.html">
    <link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html">
    <!-- -->
    <link rel="stylesheet" href="../basic.css">
    <style>
      polymer-ui-toolbar.custom-toolbar {
        font-size: 30px !important;
        background-color: orange;
      }
    </style>
  </head>
  <body class="polymer-ui-body-text">
    <polymer-ui-toolbar>
      <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
      <polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
      <div flex>Toolbar: naked</div>
      <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
    </polymer-ui-toolbar>
    <br />
    <polymer-ui-toolbar theme="polymer-ui-light-theme">
      <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
      <polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
      <div flex>Toolbar: polymer-ui-light-theme</div>
      <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
    </polymer-ui-toolbar>
    <br />
    <polymer-ui-toolbar theme="polymer-ui-dark-theme">
      <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
      <polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
      <div flex>Toolbar: polymer-ui-dark-theme</div>
      <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
    </polymer-ui-toolbar>
    <br />
    <polymer-ui-toolbar theme="polymer-ui-dark-theme">
      <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
      <polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
      <div flex>Toolbar: responsive</div>
      <polymer-ui-toolbar responsive>
        <polymer-ui-icon-button icon="trash"></polymer-ui-icon-button>
        <polymer-ui-icon-button icon="search"></polymer-ui-icon-button>
        <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
      </polymer-ui-toolbar>
    </polymer-ui-toolbar>
    <br />
    <div theme="polymer-ui-dark-theme">
      <div>
        <polymer-ui-toolbar>
          <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
          <polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
          <div flex>Toolbar: container theme</div>
          <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
        </polymer-ui-toolbar>
      </div>
    </div>
    <br />
    <br />
    <h3>below here, not so much with the working</h3>
    <br />
    <p>color/font work via style inheritance only, cannot affect the icon without some other support ... pseudo?</p>
    <polymer-ui-toolbar class="custom-toolbar">
      <polymer-ui-icon-button src="star.png"></polymer-ui-icon-button>
      <div flex>Toolbar: custom</div>
      <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
    </polymer-ui-toolbar>
  </body>
</html>
